<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        基础题库
        <el-button size="mini" type="primary"><i class="el-icon-edit">新增试题</i></el-button>
        <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
  <el-form label-width="84px">
  <el-form-item label="学科" >
    <el-select style="width:100%" placeholder="请选择" v-model="firstInput.inputOne">
      <el-option v-for="item in firstInput" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
</div>
</el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-form label-width="84px" >
  <el-form-item label="二级目录" >
    <el-select style="width:100%" placeholder="请选择" v-model="eigInput">
      <!-- <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option> -->
    </el-select>
   </el-form-item>
   </el-form >
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
   <el-form label-width="84px">
   <el-form-item label="活动区域" >
    <el-select style="width:100%" placeholder="请选择" v-model="inputQ">
      <!-- 占位Q -->
    </el-select>
   </el-form-item>
   </el-form>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-form label-width="84px">
       <el-form-item label="活动名称">
    <el-input ></el-input>
  </el-form-item>
    </el-form>
    </div></el-col>
</el-row>

<!-- 二行 -->
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-form label-width="84px">
  <el-form-item label="试题类型" >
    <el-select style="width:100%" placeholder="请选择" v-model="fiveInput.inputFive">
      <el-option v-for="item in fiveInput" :key="item.value" :value="item.value" :label="item.label"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-form label-width="84px">
  <el-form-item label="难度" >
    <el-select style="width:100%" placeholder="请选择" v-model="sixInput.inputSix">
      <el-option v-for="item in sixInput" :key="item.value" :value="item.value" :label="item.label"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-form label-width="84px">
  <el-form-item label="方向" >
    <el-select style="width:100%" placeholder="请选择" v-model="sevInput.inputSev">
      <el-option v-for="(item,index) in sevInput" :key="index" :label="item" :value="item"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple" >
    <el-form label-width="84px" >
  <el-form-item label="录入人" >
    <el-select style="width:100%" placeholder="请选择" v-model="eigInput">
      <el-option label="超级管理员" value="shanghai"></el-option>
      <el-option label="录入管理员" value="shanghai"></el-option>
      <el-option label="demo" value="shanghai"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
    </div></el-col>
</el-row>

<el-row :gutter="20" >
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-form label-width="84px">
       <el-form-item label="活动名称">
    <el-input ></el-input>
  </el-form-item>
    </el-form>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-form label-width="84px">
       <el-form-item label="活动名称">
    <el-input ></el-input>
  </el-form-item>

  <!-- 下拉框 -->
    </el-form>
    </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">
    <el-form>
    <el-form-item label="城市" label-width="85px">
    <el-select style="width:127px" placeholder="活动区域" v-model="cityInput.cityInput1">
      <el-option v-for="(item,index) in cityInput" :key="index" :value="item" :label="item"></el-option>
      <el-option label="区域二" value="beijing"></el-option>

    </el-select>
    <el-select style="width:130px" placeholder="活动区域" v-model="inputW">
    </el-select>
  </el-form-item>
  </el-form>
    </div></el-col>

    <!-- 按钮 -->

    <el-col :span="6"><div class="grid-content bg-purple">
    <el-form>
    <el-form-item>
   <div class="reight">
    <el-button size="mini">查询</el-button>
    <el-button type="primary" size="mini">查询</el-button></div>
    </el-form-item>
    </el-form>
    </div></el-col>

</el-row>
   <!-- 标题内容 -->
    <div>
      <span >
        <i class="el-icon-info"></i>数据一共 7 条</span>
    </div>
    <!-- table -->
    <el-table
    stripe
    style="width: 100%" :data="arr">
    <el-table-column
      label="试题编号"
      width="120"
      prop="number">
    </el-table-column>
    <el-table-column
      label="学科"
      width="150"
      prop="subject">
    </el-table-column>
    <el-table-column
      label="目录"
      width="150"
      prop="id"
      >
    </el-table-column>
    <el-table-column
      label="题型"
      width="150"
      prop="catalog">
    </el-table-column>
    <el-table-column
      label="题干"
      width="150"
      prop="catalog">
    </el-table-column>
    <el-table-column
      label="录入事件"
      width="150"
      prop="enterprise">
    </el-table-column>
    <el-table-column
      label="难度"
      width="150"
      prop="question">
    </el-table-column>
    <el-table-column
      label="录入人"
      width="170"
      prop="creator">
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="{row}">
  <button type="button" class="el-button el-button--primary el-button--small is-plain is-circle" title="预览"><i class="el-icon-view"></i></button>

  <button type="button" class="el-button el-button--success el-button--small is-plain is-circle" title="修改"><i class="el-icon-edit"></i></button>

  <button @click="del(row)"  type="button" class="el-button el-button--danger el-button--small is-plain is-circle"  title="删除"><i class="el-icon-delete"></i>
  </button>

  <button type="button" class="el-button el-button--warning el-button--small is-plain is-circle" title="加入精选"><i class="el-icon-check"></i></button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination
  layout="prev, pager, next"
  @current-change="current"
  :page-size="pagesize"
  :page="page"
  :total="counts"
  >
</el-pagination>
      </el-card>

    </div>

  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      // 分页 + table
      page: 1,
      pagesize: 3,
      counts: 0,
      pages: 1,
      arr: [],
      // 第一个下拉框
      firstInput: [],
      value: '',
      label: '',
      inputOne: '',
      // 二级目录
      // 第五个下拉框
      fiveInput: [],
      inputFive: '',
      // 第六个下拉框
      sixInput: [],
      inputSix: '',
      // 第七个下拉框
      sevInput: [],
      inputSev: '',
      // 第八个下拉框
      eigInput: [],
      // 城市
      // city: provinces()
      cityInput: [],
      cityInput1: '',
      // 城市下地区
      citysInput: [],
      citysInput1: '',
      // 占位  占位
      inputQ: [],
      inputW: [],
      inputE: []
    }
  },
  created () {
    this.list()
    this.simple()
    this.difficulty()
    this.direction()
    this.provinces()
    this.citys()
    // this.remove()
  },
  mounted () {
    this.questionType()
  },
  methods: {
    // 分页器页面
    async list () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize
      })
      this.arr = data.items
      this.counts = data.counts
      console.log(data)
    },
    // 分页器切换
    current (newPage) {
      this.page = newPage
      this.list()
    },
    // 学科内容接口
    async simple () {
      const resFir = await simple()
      console.log(resFir)
      this.firstInput = resFir.data
    },
    // 试题类型   直接使用
    questionType () {
      this.fiveInput = questionType
      console.log(questionType)
    },
    // 难度
    difficulty () {
      this.sixInput = difficulty
      console.log(difficulty)
    },
    // 方向
    direction () {
      this.sevInput = direction
      console.log(direction)
    },
    // 城市下拉框
    provinces () {
      this.cityInput = provinces()
      console.log(this.cityInput)
    },
    // 城市下地区
    citys () {
      this.citysInput = citys()
      console.log(this.citysInput)
    },
    // 删除操作
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        console.log(row)
        this.list()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
// computed () {
//   return {
//     // city () {

//     // }
//   }
// }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .reight{
    float: right;
  }
  .el-button--primary.is-plain {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
    margin-right: 5px;
}
.el-button--success.is-plain {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
    margin-right: 5px;
}
.el-button--danger.is-plain {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
    margin-right: 5px;
}
  .el-button--primary.is-plain {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
}
.el-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
}
</style>
